<template>
  <div v-loading="isLoading">
    <div class="scheme_container">
      <div class="BAC-title" style="height: 68px;font-size: 24px;">水上桥区管控专题</div>
      <div class="content-container">
        <van-empty
          description="暂无数据"
          v-if="associationBgData.length == 0"
        />
        <div
          class="content"
          v-for="(item, index) in associationBgData"
          @click="clickBridge(item)"
          :key="index"
        >
          {{ item }}
          <img
            src="../../../static/images/bridgeAreaControl/icon-more-big.png"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import { useRouter } from "vue-router";
import { associationBg } from "../../../utils/bridgeAreaControlApi";
const router = useRouter();
const showImg = (url) => {
  showImagePreview({
    images: [url],
  });
};
const clickBridge = (val) => {
  router.push({
    path: "/bridgeAreaControl-bridge",
    query: { bridge: val },
  });
};
const isLoading = ref(false);
const WaterwayListValue = ref("");
const associationBgData = ref([]);
const getassociationBgDataFn = () => {
  isLoading.value = true;
  associationBg({
    waterway: WaterwayListValue.value,
  })
    .then((res) => {
      if (res.code === 200 && res.data) {
        associationBgData.value = res.data.bgName;
      }
    })
    .finally(() => {
      isLoading.value = false;
    });
};
onMounted(() => {
  WaterwayListValue.value = router?.currentRoute?.value?.query?.Waterway;
  getassociationBgDataFn();
});
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  display: none;
}

.BAC-title {
  width: 100%;
  font-size: 24px;
  line-height: 68px;
  background: rgba(49, 118, 233, 0.6);
  color: #fff;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: url("../../../static/images/bridgeAreaControl/bg_zhuanti.png")
    no-repeat;
  background-size: cover;
}
.scheme_container {
  overflow: hidden;
  .content-container {
    margin-top: 68px;
    width: 100%;
    height: calc(100vh - 68px);
    padding: 10px 20px 0;
    box-sizing: border-box;
    overflow-y: scroll;
    .content {
      background: #ffffff;
      box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.08);
      border-radius: 8px;
      margin-bottom: 16px;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      height: 54px;
      box-sizing: border-box;
      img {
        width: 12px;
        height: 18px;
      }
      .title {
        display: flex;
        background: rgba(22, 93, 255, 0.05);
        height: 36px;
        color: #262626;
        padding: 0 8px;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
        font-size: 14px;
      }
    }
  }
}
</style>
